<template>
	<view class="personal">
		<view class="hearder" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="h-88 ph-32 f ai-c jc-s-b">
				<image src="http://cwht.ricecs.cn/app/shop/back-b.png" class="w-32 h-32" @click="back"></image>
				<view class="fs-28 text-color5 mp-weixin">点击修改背景图</view>
			</view>
		</view>
		<image :src="params.backgroundImageUrl" class="w-f h-400" @click="uploadImg"></image>
		<view class="content b-24 w-f ph-32">
			<view class="ava">
				<view class="w-194 h-194 b-194 ava-box" @click="show=true">
					<image :src="params.avatar" class="w-194 h-194 b-194 ava-box" mode="aspectFill"></image>
				</view>
				<view class="mt-16 fs-28 text-color3">点击更换头像</view>
			</view>
			<view class="pt-158">
				<u--form labelPosition="left" :model="params" ref="uForm" labelWidth="75"
					:labelStyle="{ fontSize: 32 }">
					<u-form-item label="昵称" prop="nickname" borderBottom>
						<u--input v-model="params.nickname" border="none" placeholder="请输入" fontSize="16"
							clearable></u--input>
					</u-form-item>
					<u-form-item label="简介" prop="introduction" borderBottom>
						<u--input v-model="params.introduction" border="none" placeholder="填写个简介，让大家认识你" fontSize="16"
							clearable></u--input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" borderBottom @click="
                            showSex = true;
                      
                        ">
						<view class="f jc-s-b">
							<u--input v-model="params.sex_name" disabled disabledColor="#ffffff" placeholder="请选择"
								border="none"></u--input>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="生日" prop="birthday" borderBottom @click="
                            showBirthday = true;
                        ">
						<view class="f jc-s-b">
							<u--input v-model="params.birthday" disabled disabledColor="#ffffff" placeholder="请选择年/月/日"
								border="none"></u--input>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="当前城市" prop="city" borderBottom>
						<view class="f jc-s-b">
							<u--input v-model="params.city" Color="#ffffff" placeholder="请输入" border="none"
								clearable></u--input>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>

		<view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
			<view class="f ai-c ph-40 h-136 jc-s-b">
				<view class="w-327"><u-button text="取消" color="#F5F5F5" shape="circle" @click="back"
						:customStyle="{ color: '#555555' }"></u-button></view>
				<view class="w-327"><u-button text="保存" color="#FABB3C" shape="circle" @click="submit"></u-button>
				</view>
			</view>
		</view>
	</view>
	<!-- 性别 -->
	<u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="showSex = false" @select="sexSelect">
	</u-action-sheet>
	<!-- 生日 -->
	<qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop" v-if="show"  @close="show=false"></qf-image-cropper>
	<u-datetime-picker :show="showBirthday" :minDate="-2082817365000" mode="date" @confirm="selectBirthday"
		@close="showBirthday = false"></u-datetime-picker>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { useAuthStore } from '@/store/modules/auth';
	import { getBaseUrl, getUploadUrl } from '@/utils/env';
	import { userUpdate } from '@/services/api/mine/index';
	const authStore = useAuthStore();
	const model = ref({});
	const showSex = ref(false);
	const show=ref(false)
	const showBirthday = ref(false);
	const sexList = ref([{ id: 0, name: '女' }, { id: 1, name: '男' }]);
	const params = ref({
		nickname: '',
		avatar: '',
		city: '',
		backgroundImageUrl: '',
		introduction: '',
		birthday: '',
		sex: '',
	});
	onShow(async () => {
		const data = await authStore.getUserInfos();
		console.log(data);
		for (let key in params.value) {
			params.value[key] = data[key];
		}
		params.value.sex_name = params.value.sex == 0 ? '女' : '男';
	});
	function back() {
		uni.navigateBack();
	}
	//提交
	async function submit() {
		await userUpdate(params.value);
		uni.showToast({
			title: '保存成功',
		});
		setTimeout(() => {
			uni.navigateBack();
		}, 1000);
	}
	function selectBirthday(e : any) {
		let data = uni.$u.timeFormat(e.value);

		params.value.birthday = data;
		showBirthday.value = false;
	}

	function sexSelect(e : any) {
		params.value.sex = e.id;
		params.value.sex_name = e.name;

	}
	function handleCrop(e) {
		uni.uploadFile({
			url: getUploadUrl(),
			filePath: e.tempFilePath,
			name: 'file',
			formData: {
				user: 'test',
			},
			success: (res) => {
				params.value.avatar = JSON.parse(res.data).data;
				show.value=false
			},
		});
	}
	//跟换头像
	function changeAva() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
				uni.uploadFile({
					url: getUploadUrl(),
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: {
						user: 'test',
					},
					success: (res) => {
						params.value.avatar = JSON.parse(res.data).data;
					},
				});
			},
		});
	}
	//换背景
	function uploadImg() {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log(JSON.stringify(res.tempFilePaths));
				uni.uploadFile({
					url: getUploadUrl(),
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: {
						user: 'test',
					},
					success: (res) => {
						params.value.backgroundImageUrl = JSON.parse(res.data).data;
					},
				});
			},
		});
	}
	//头部
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	//底部安全距离
	let safeArea = systemInfo.safeArea;
	let screenHeight = systemInfo.screenHeight;
	let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
	.personal {
		background: #f5f5f5;
		min-height: 100vh;

		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;
			border-top: 1px solid #f5f5f5;
		}

		.content {
			background: #fff;
			position: relative;
			top: -32rpx;

			::v-deep .u-form-item__body {
				padding: 32rpx 0 !important;
			}

			.ava {
				position: absolute;
				top: -97rpx;
				left: 50%;
				margin-left: -97rpx;

				.ava-box {
					background: #d9d9d9;
					border: 3rpx solid #ffffff;
				}
			}
		}

		.hearder {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
		}
	}
</style>